import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'

export default class Search extends Component {
  ref = React.createRef()
  search = async () => {


    //  解构赋值value为keyWord
    const { current: {value: keyWord} } = this.ref;
    console.log(keyWord);

    // 发送请求前通知App更新状态
    // this.props.updateAppState({isFirst: false, isLoading: true })
    
    // 发送请求前通知List更新状态
    PubSub.publish('getGitHub', {isFirst: false, isLoading: true })

    //#region 发送网络请求 ----使用axios发送
    // axios.get(`https://api.github.com/search/users?q=${keyWord}`)
    // axios.get(`/api1/search/users?q=${keyWord}`)
    //     .then((response) => {
    //         console.log(response.data);
    //         // 请求成功后通知App更新状态 将上一次错误结果清空
    //         // this.props.updateAppState({ isLoading: false, users: response.data.items, err: '' })

    //         // 发送请求前通知List更新状态
    //         PubSub.publish('getGitHub', { isLoading: false, users: response.data.items, err: '' })
    //     })
    //     .catch(err => {
    //         console.log(err);

    //         // 请求失败后通知App更新状态
    //         // this.props.updateAppState({ isLoading: false, err: err.message })

    //         // 发送请求前通知List更新状态
    //         PubSub.publish('getGitHub', { isLoading: false, err: err.message })
    //     })
    //#endregion
        
    // 发送网络请求---使用fetch发送(未优化)  不使用httprequest发送请求
    // fetch(`/api1/search/users?q=${keyWord}`).then(
    //   res => {
    //     console.log('联系服务器成功了', res);
    //     return res.json(); // 返回promise对象
    //   },
    //   err => {
    //     console.log('获取数据失败了', err);
    //     return new Promise(() => {}) // 返回空promise对象 终止fetch
    //   }
    // ).then(
    //   res => {console.log('获取数据成功了', res);},
    //   err => {console.log('获取数据失败了', err);}
    // )

    // 发送网络请求---使用fetch发送(优化后)
    try { //使用try catch捕获请求失败
      // await后面需要接promise对象的返回结果
      const response = await fetch(`/api1/search/users?q=${keyWord}`);
      const data = await response.json(); // 返回的也是个promise对象  
      console.log(data);
      PubSub.publish('getGitHub', { isLoading: false, users: data.items, err: '' })
    } catch (error) {
      console.log('请求出错', error);
      PubSub.publish('getGitHub', { isLoading: false, err: error.message })
    }
  }
  render() {
    return (
      <>
        <section className="jumbotron">
          <h3 className="jumbotron-heading">Search Github Users</h3>
          <div>
            <input
              ref={this.ref}
              type="text"
              placeholder="enter the name you search"
            />
            &nbsp;
            <button onClick={this.search}>Search</button>
          </div>
        </section>
      </>
    )
  }
}
